export class TranslMove {
    //translate3d拖动,不会影响元素的布局。性能消耗也小
    //在container中拖动dragItem元素
    #active = false;//拖动状态控制
    #currentX = 0;
    #currentY = 0;
    #initialX = 0;
    #initialY = 0;
    #xOffset = 0; //x轴位置
    #yOffset = 0; //y轴位置
    #scale = '1'; //初始大小
    #scaleStep = 0.05; //缩放步长
    #maxScale = 4; //最大缩放
    #minScale = 0.1; //最小缩放
    #dragItem;//拖动元素
    #container//父元素

    constructor(dragItem, container) {
        this.#dragItem = dragItem
        this.#container = container
    }

    zoomEvent() {//放大缩小
        if (this.#container) {
            //鼠标滑轮滚动事件
            this.#container.addEventListener("mousewheel", this.#onMouseWheel.bind(this));
            this.#container.addEventListener("DOMMouseScroll", this.#onMouseWheel.bind(this));
            //兼容手势事件
            //开始拖动
            this.#container.addEventListener("touchstart", this.#dragStart.bind(this), false);
            //拖动结束
            this.#container.addEventListener("touchend", this.#dragEnd.bind(this), false);
            //拖动中
            this.#container.addEventListener("touchmove", this.#drag.bind(this), false);
        }

    }
    dragEvent() {//拖动
        if (this.#dragItem) {
            //兼容鼠标事件
            //鼠标按下开始
            this.#dragItem.addEventListener("mousedown", this.#dragStart.bind(this), false);
            //鼠标松开停止
            this.#dragItem.addEventListener("mouseup", this.#dragEnd.bind(this), false);
            //鼠标移动
            this.#dragItem.addEventListener("mousemove", this.#drag.bind(this), false);
        }
    }
    clearEvent() {//清除事件
        this.#dragItem.removeEventListener("mousedown", this.#dragStart.bind(this), false)
        this.#dragItem.removeEventListener("mouseup", this.#dragEnd.bind(this), false)
        this.#dragItem.removeEventListener("mousemove", this.#drag.bind(this), false)
        this.#container.removeEventListener("mousewheel", this.#onMouseWheel.bind(this));
        this.#container.removeEventListener("DOMMouseScroll", this.#onMouseWheel.bind(this));
        this.#container.removeEventListener("touchstart", this.#dragStart.bind(this), false);
        this.#container.removeEventListener("touchend", this.#dragEnd.bind(this), false);
        this.#container.removeEventListener("touchmove", this.#drag.bind(this), false);
    }
    #onMouseWheel(e) {
        if (!this.#active) {
            let ev = e || window.event;
            let down = true; //true为下滚动，false为上滚动
            down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
            if (down && parseFloat(this.#scale) > this.#minScale) {
                //最小
                this.#scale = (parseFloat(this.#scale) - this.#scaleStep).toFixed(2);
            } else if (!down && parseFloat(this.#scale) < this.#maxScale) {
                //最大
                this.#scale = (parseFloat(this.#scale) + this.#scaleStep).toFixed(2);
            }
            this.#dragItem.style.transform = this.#setStyle({
                translate3d: { xPos: this.#xOffset, yPos: this.#yOffset },
                scale: this.#scale,
            });
        }
    }
    #dragStart(e) {
        if (e.type === "touchstart") {
            this.#initialX = e.touches[0].clientX - this.#xOffset;
            this.#initialY = e.touches[0].clientY - this.#yOffset;
        } else {
            this.#initialX = e.clientX - this.#xOffset;
            this.#initialY = e.clientY - this.#yOffset;
        }
        //dragItem有子元素情况下，会导致无法拖动，所以注释掉了。
        //if (e.target === dragItem) {
        this.#active = true;
        //}
    }

    #dragEnd(e) {
        //记录结束时的鼠标位置
        this.#initialX = this.#currentX;
        this.#initialY = this.#currentY;
        this.#active = false;
    }

    #drag(e) {
        if (this.#active) {
            e.preventDefault();

            if (e.type === "touchmove") {
                this.#currentX = e.touches[0].clientX - this.#initialX;
                this.#currentY = e.touches[0].clientY - this.#initialY;
            } else {
                this.#currentX = e.clientX - this.#initialX;
                this.#currentY = e.clientY - this.#initialY;
            }
            this.#xOffset = this.#currentX;
            this.#yOffset = this.#currentY;
            this.#setTranslate(this.#currentX, this.#currentY, this.#dragItem);
        }
    }

    #setTranslate(xPos, yPos, el) {
        //改变translate3d
        el.style.transform = this.#setStyle({
            translate3d: { xPos, yPos },
            scale: this.#scale,
        });
    }
    #setStyle({ translate3d, scale }) {
        //拖动和缩放时要保留之前的样式
        return (
            "scale(" +
            scale +
            ")" +
            " translate3d(" +
            translate3d.xPos +
            "px, " +
            translate3d.yPos +
            "px, 0)"
        );
    }

}